<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				list-style: none;
			}
			
			.clearfix:after {
				content: '';
				clear: both;
				display: block;
			}
			
			li {
				width: 65px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				border: 1px solid greenyellow;
				float: left;
			}
			
			p {
				width: 200px;
				height: 200px;
				background: beige;
				display: none;
			}
			
			.active {
				background: aquamarine;
			}
			
			.show {
				display: block;
			}
		</style>
		<script>
			//声明构造函数
			function fn() {
				this.oPar = document.querySelector('.info')
				this.aBtn = this.oPar.querySelectorAll('li')
				this.list = this.oPar.querySelectorAll('p');
				var _this = this;
				for(var i = 0; i < this.aBtn.length; i++) {
					this.aBtn[i].index = i;
					this.aBtn[i].onclick = function() {
						_this.change(this.index);
					};
				}
			}
			fn.prototype.change = function(n) {
				for(var i = 0; i < this.aBtn.length; i++) {
					this.aBtn[i].className = '';
					this.list[i].className = '';
				}
				this.list[n].className = 'show';
				this.aBtn[n].className = 'active';
			}
		</script>
	</head>

	<body>
		<div class="info">
			<ul class="clearfix">
				<li class="active">1</li>
				<li>2</li>
				<li>3</li>
			</ul>
			<p class="show">1</p>
			<p>2</p>
			<p>3</p>
		</div>
		<script>
			var tab1 = new fn();
		</script>
	</body>

</html>